<!--
 * @Author: Leng
 * @Date: 2022-11-22 14:02:41
 * @Description: 淘宝订单
 * @FilePath: \vue-leng\src\views\home\demo.vue
-->

<template>
  <div class="tb-order-content">
  <div class="tb-order">
        <div class="tb-order__hd">
            <span class="tb__title">我的订单</span>
            <span class="tb__more">全部 ></span>
        </div>
        <div class="tb-order__bd">
            <a href="#" class="tb-order__item">
                <span>
                    <i class="iconfont icon-daifukuan"></i>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">待付款</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <i class="iconfont icon-daifahuo"></i>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">待发货</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <i class="iconfont icon-daishouhuo"></i>
                    <span class="tb__pointer tb__pointer_on">2</span>
                </span>
                <p class="tb__desc">待收货</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <i class="iconfont icon-daipingjia"></i>
                    <span class="tb__pointer tb__pointer_on">8</span>
                </span>
                <p class="tb__desc">待评价</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <i class="iconfont icon-tuikuan"></i>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">退款/售后</p>
            </a>
        </div>
 </div>
</div>
</template>

<script>
// 挂载$config
import VuexConfig from '../../../index'
let iconUrl = $config.iconfont
$tool.loadCSS(iconUrl + '.css', null, 'leng-font-css')
$tool.loadScript(iconUrl + '.js', null, 'leng-font-js')
console.log('加载iconfont:' + iconUrl)

export default {
  name: 'loginCardName'
}
</script>
<style lang="scss" scoped>
a{
    text-decoration: none;
}
.tb-order-content{
    background-color: #5b80d7;
    padding: 5px;
}
.tb-order{
    width:95%;
    margin:10px auto;
    background-color: white;
    border-radius: 20px;
}
.tb-order__hd{
    height:63px;
    padding:0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tb__title{
    font-size: 20px;
    font-weight:bold;
    /* line-height:63px; */
}
.tb__more{
    font-size:16px;
    color:gray;
}
.tb-order__bd{
    height:84px;
    display: flex;
    justify-content: space-around;
}
.tb-order__item{
    width:20%;
    text-align: center;
    line-height: 20px;
    color:black;
    position: relative;
}
.iconfont{
    font-size: 30px;
    font-weight: 550;
}
.tb__desc{
    font-size: 14px;
}
.tb__pointer{
    width:22px;
    height:22px;
    position: absolute;
    display: inline-block;
    color:white;
    top:-9px;
    right:18px;
    border-radius: 50%;
    line-height: 22px;
    font-size:11px;
    font-weight: 550;
}
.tb__pointer_on{
   background-color: #ff7302;
}
</style>